<template>
  <div id="otherEnergy">
    <div class="other-left">
      <ems-title :emsTitle="totalTitle" :unit="unit"></ems-title>
      <div class="leftPie-box">
        <div id="pieEnergy" ref="pieEnergy"></div>
      </div>
    </div>
    <div class="other-right">
      <div class="box-up">
        <ems-title :emsTitle="totalTitle1" :unit="unit"></ems-title>
        <ems-table :tableList="tableList" :isColor="true" :colorList="colorList"></ems-table>
      </div>
      <div class="box-down">
        <ems-title :emsTitle="singleTitle" :unit="singleUnit"></ems-title>
        <div id="bikeBar" ref="bikeBar"></div>
      </div>
    </div>
    <ems-back></ems-back>
  </div>
</template>

<script>
  import EmsBack from '../../../components/common/emsBack'
  import EmsTitle from '../../../components/common/emsTitle'
  import EmsTable from '../../../components/common/emsTable'
  import echarts from 'echarts'
  import {mapState} from 'vuex'
  import {timerFun} from '@/components/common/mixin/tools'
  import emsId from '@/api/emsId'

  export default {
    // 组件的名称
    name: 'otherEnergy',
    // props 可以是数组或对象，用于接收来自父组件的数据
    props: {},
    // 数据绑定
    data () {
      return {
        totalTitle: '',
        totalTitle1: '',
        singleTitle: '',
        unit: '',
        singleUnit: '',
        // 定时器
        otherTime: null,
        tableList: [],
        colorList: ['#9254DE', '#FFC53D', '#F759AB', '#40A9FF', '#11D6A2', '#597EF7', '#9F9C9B', '#9F9C9B', '#9F9C9B', '#9F9C9B', '#9F9C9B', '#9F9C9B', '#9F9C9B', '#9F9C9B']
      }
    },
    // 组件
    components: {EmsTable, EmsTitle, EmsBack},
    // 注意，不应该使用箭头函数来定义 methods函数 或者  computed函数 (例如 aDouble: () => this.a * 2)。
    // 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined
    // 方法
    methods: {
      // 刷新 所有数据 的方法
      refreshData () {
        let params = {
          name: this.navActive === 'energyOverview' ? 'aggregateElectricitys' : this.navActive,
          workSpaceName: this.workSpaceName,
          time: this.activeDate
        }
        this.post_childId({...params, id: emsId['childId']})
      },
      // 获取 子级 的数据
      post_childId (obj = {}) {
        new window.Api(obj, 'POST').getData().then(res => {
          if (res.data.status === 200) {
            // console.log(res.data)
            // this.tableList = res.data.jsData.rankData
            this.tableList = res.data.jsData.rankData.rankData
            // 总标题
            this.totalTitle = res.data.jsData.rankData.title
            this.totalTitle1 = res.data.jsData.rankData.title1
            // 总单位
            this.unit = res.data.jsData.rankData.unit
            // 单车标题
            this.singleTitle = res.data.jsData.singleData.title
            // 单车单位
            this.singleUnit = res.data.jsData.singleData.unit
            this.pieEnergyEcharts(this.tableList)
            // this.bikeBarEcharts(res.data.jsData.singleData.name, res.data.jsData.singleData.value)
            this.bikeBarEcharts(res.data.jsData.singleData.singleData.name, res.data.jsData.singleData.singleData.value)
          }
        }).catch(function (e) {
          // console.log(e)
        })
      },
      // 单车子级排名柱状图
      bikeBarEcharts (yData, vData) {
        let dom = this.$refs.bikeBar
        let myChart = echarts.init(dom)
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            }
          },
          grid: {
            top: '10%',
            bottom: '10%',
            right: '10%',
            left: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisTick: {
              show: false
            },
            splitLine: { // 坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#8C99B6'],
                opacity: '.3'
              }
            },
            // x轴颜色
            axisLine: {
              lineStyle: {
                color: '#8C99B6'
                // color: '#c4cee7'
              }
            },
            axisLabel: {
              formatter: (value) => {
                if (value >= 10000 && value < 10000000) {
                  value = value / 10000 + '万'
                } else if (value >= 10000000 && value < 100000000) {
                  value = value / 10000000 + '千万'
                } else if (value >= 100000000) {
                  value = value / 100000000 + '亿'
                }
                return value
              },
              fontSize: 14,
              // fontWeight: 'bold',
              color: '#fff'
            }
          },
          yAxis: {
            splitLine: { // 坐标轴在 grid 区域中的分隔线。
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: ['#8C99B6'],
                opacity: '.3'
              }
            },
            type: 'category',
            data: yData,
            axisTick: {
              show: false
            },
            axisLabel: {
              fontSize: 14,
              // fontWeight: 'bold',
              color: '#fff'
            },
            // y轴颜色
            axisLine: {
              lineStyle: {
                color: '#8C99B6'
                // color: '#c4cee7'
              }
            }
          },
          series: [
            {
              name: '',
              type: 'bar',
              data: vData,
              // barWidth: '20px',
              itemStyle: {
                normal: {
                  // 每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                  color: params => {
                    // var colorList = ['#8C98AB', '#11D6A2', '#FFAD00', '#FF692F']
                    let colorList = ['#597EF7', '#11D6A2', '#40A9FF', '#F759AB', '#FFC53D', '#9254DE', '#F78554', '#F7161D', '#F5FA5A', '#FE14FF', '#9F9C9B', '#080DFF']
                    return colorList[params.dataIndex]
                  },
                  label: {
                    show: true, // 开启显示
                    position: 'right', // 在上方显示
                    textStyle: { // 数值样式
                      color: params => {
                        // var colorList = ['#8C98AB', '#11D6A2', '#FFAD00', '#FF692F']
                        let colorList = ['#597EF7', '#11D6A2', '#40A9FF', '#F759AB', '#FFC53D', '#9254DE', '#F78554', '#F7161D', '#F5FA5A', '#FE14FF', '#9F9C9B', '#080DFF']
                        return colorList[params.dataIndex]
                      },
                      fontSize: 14,
                      fontWeight: 'bold'
                    }
                  }
                }
              }
            }
          ]
        }
        // option.yAxis.data = pastCompareObj.dataYear
        // option.series[0] = {...option.series[0], ...pastCompareObj}
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      },
      // 左侧大的饼图
      pieEnergyEcharts (tableList) {
        let dom = this.$refs.pieEnergy
        let myChart = echarts.init(dom)
        let option = {
          title: {
            text: this.tableListTotal,
            subtext: '总量',
            subtextStyle: {
              color: '#fff',
              fontWeight: 'normal',
              fontSize: 18
            },
            // text: `777777 \n\n 总量`,
            textVerticalAlign: 'middle',
            textStyle: {
              color: '#fff',
              fontWeight: 'normal',
              fontSize: 24
            },
            width: 200,
            height: 50,
            textAlign: 'center',
            left: '50%',
            top: '48%'
          },
          tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '总量子级占比',
              type: 'pie',
              radius: [100, 170],
              color: this.colorList,
              // cursor: 'pointer',
              // avoidLabelOverlap: false,
              // label: {
              //   normal: {
              //     show: false,
              //     position: 'center'
              //   },
              //   emphasis: {
              //     show: false,
              //     textStyle: {
              //       fontSize: '18'
              //     },
              //     formatter: [
              //       '{b}\n',
              //       '{c}'
              //     ].join('\n')
              //   },
              //
              //   color: '#000'
              // },
              label: {
                normal: {
                  show: true,
                  // formatter: function (params) {
                  //   let res = params.percent + '% \n\n' + params.name
                  //   return res
                  // },
                  formatter: '{a|{d}%} \n{hr|}\n{b|{b}}',
                  textStyle: {
                    color: '#fff'
                  },
                  fontSize: 20,
                  rich: {
                    a: {
                      color: '#fff',
                      lineHeight: 33,
                      fontSize: 20,
                      align: 'center'
                    },
                    // abg: {
                    //     backgroundColor: '#333',
                    //     width: '100%',
                    //     align: 'right',
                    //     height: 22,
                    //     borderRadius: [4, 4, 0, 0]
                    // },
                    hr: {
                      borderColor: '#fff',
                      width: '100%',
                      borderWidth: 0.5,
                      height: 0
                    },
                    b: {
                      fontSize: 16,
                      lineHeight: 33,
                      color: '#fff'
                    }
                  }
                },
                emphasis: {
                  show: true
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)',
                    type: 'dashed'
                  },
                  show: true,
                  smooth: false,
                  length: 30,
                  length2: 70
                }
              },
              emphasis: {},
              itemStyle: {
                borderWidth: 5,
                borderType: 'solid',
                borderColor: '#1E358F'
                // borderColor: 'rgba(20, 63, 179, 1)'
                // shadowColor: 'rgba(0, 0, 0, 0.5)',
                // shadowBlur: 10
              },
              data: tableList
            }
          ]
        }
        // 饼图 样式 的修改
        if (option && typeof option === 'object') {
          myChart.setOption(option, true)
          window.addEventListener('resize', () => {
            myChart.resize()
          })
        }
      }
    },
    // 计算属性
    computed: {
      ...mapState('newEms', {
        navActive: state => state.navActive,
        workSpaceName: state => state.workSpaceName,
        activeDate: state => state.activeDate
      }),
      tableListTotal () {
        let total = 0
        this.tableList.forEach(item => {
          total += parseFloat(item.value)
        })
        return total.toFixed(2)
      }
    },
    // 监听
    watch: {
      // 监听路由变化
    },
    // 常用钩子函数，总共有8个，可以参照vue的生命周期看
    // 完成了 data 数据的初始化，el没有，就是说页面的dom没有完成转化，还是 {{data}} 这种
    created () {
    },
    // 完成挂载，相当于dom ready
    mounted () {
      this.refreshData()
      timerFun(this, 'otherTime', 'refreshData', 20000)
    },
    // 销毁，可以做一些定时器的销毁,缓存的清除等操作
    destroyed () {
      clearTimeout(this.otherTime)
    }
  }
</script>

<style lang="scss" scoped='scoped'>
  #bikeBar {
    height: 340px;
  }

  .leftPie-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 70%;
    width: 90%;
    margin: 0 auto;
  }

  #pieEnergy {
    /*height: 700px;*/
    width: 100%;
    height: 100%;
  }

  #otherEnergy {
    padding: 20px;
    height: 100%;
    font-family: PingFang SC;
    display: flex;
    color: $font-f;
    position: relative;

    .other-left {
      flex: 1;
    }

    .other-left, .box-up, .box-down {
      background-color: $sbgc;
      padding: 30px;
      display: flex;
      flex-direction: column;
    }

    .other-right {
      flex: 0 0 32.6%;
      margin-left: 20px;
      display: flex;
      flex-direction: column;

      > div {
        flex: 1;
      }

      div.box-up {
        margin-bottom: 20px;
      }
    }

    @media screen and (min-width: 1921px) {
      #bikeBar {
        height: 470px;
      }
    }
  }
</style>
